/*
 * @Author: funlee
 * @Email: i@funlee.cn
 * @Date: 2019-06-27 17:32:36
 * @Description: 首页-应用工具-APP评论新消息检索-详情-变更记录
 *               挖掘查询-详情-变更记录
 */
import React from "react";
import { Pagination, Select, Input, DatePicker } from "antd";
import { observer, inject } from "mobx-react";

const { RangePicker } = DatePicker;
const { Option } = Select;

const { Search } = Input;

@inject("APPIRChangeLogStore")
@observer
class APPIRChangeLog extends React.Component {
    state = {
        types: [
            { name: "新增关联对象", id: "addObj" },
            { name: "删除关联对象", id: "delObj" },
            { name: "新增使用人群", id: "addPeople" },
            { name: "删除使用人群", id: "delPeople" },
            { name: "编辑备注信息", id: "editComment" },
            { name: "编辑风险评分", id: "editScore" }
        ],
        selectDate: []
    };
    componentDidMount() {
        this.props.APPIRChangeLogStore.getData();
    }
    handleSetNature(type, value, isGetData = true) {
        this.props.APPIRChangeLogStore.setNature(type, value, isGetData);
    }

    render() {
        const { types } = this.state;
        const { listData } = this.props.APPIRChangeLogStore;
        return (
            <div className="APPIR-common-table-page">
                <div className="filter-top">
                    <RangePicker
                        placeholder={["请选择日期", "请选择日期"]}
                        onChange={() => this.handleSetNature("selectDate", arguments[1], true)}
                        allowClear={false}
                    />
                    <Select
                        style={{ width: 180 }}
                        placeholder="请选择类型"
                        onChange={value => this.handleSetNature("sourceType", value, true)}
                    >
                        {types.map(d => (
                            <Option value={d.id} key={d.id}>
                                {d.name}
                            </Option>
                        ))}
                    </Select>
                    <div>
                        <Search
                            placeholder="请输入关键字"
                            style={{ width: 220 }}
                            onChange={e => this.handleSetNature("keyWords", e.target.value.trim(), false)}
                            onSearch={() => this.props.APPIRChangeLogStore.getData()}
                        />
                    </div>
                </div>
                <table className="lists-table">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>变更用户</th>
                            <th>变更类型</th>
                            <th>变更内容</th>
                            <th>变更时间</th>
                        </tr>
                    </thead>
                    <tbody>
                        {listData.map((item, index) => (
                            <tr key={`APPIRChangeLog-${index}`}>
                                <td>{index + 1}</td>
                                <td>{item.user}</td>
                                <td>{item.type}</td>
                                <td>{item.text}</td>
                                <td>{item.time}</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
                <div className="table-pagination">
                    <Pagination
                        defaultcurrent={6}
                        total={500}
                        onChange={(page, pageSize) => this.props.APPIRChangeLogStore.changePage(page, pageSize)}
                    />
                </div>
            </div>
        );
    }
}

export default APPIRChangeLog;
